<template>
    <transition name="move">
        <div class="artsPublish" v-show="artsPublishFlag">
            <mTitle :title="title" :returnShow="returnShow" @clickHide="hide"></mTitle>
            <div class="arts-publish-container">
                <div class="publish-text">
                    <textarea v-model="textareaVal" class="pulbish-textarea" placeholder="说点什么吧..."></textarea>
                </div>
                <!-- 图片上传 -->
                <div class="publish-images-list" v-show="isPhoto">
                    <i class="icon" @click.stop="addPic"></i>
                    <input type="file" ref="inputFile" multiple accept="image/jpeg,image/jpg,image/png" @change="onFileChange" style="display: none;">
                </div>
                <!-- 上传图片展示 -->
                <ul class="publish-images-item" v-show="!isPhoto">
                    <li class="publish-images-li" v-for="(item, index) in imgUrls">
                        <a href="javascript:;" class="list-link">
                            <img @click="showImagePreview(item)" class="list-link-img" :src="item" alt="" />
                        </a>
                        <span class="list-img-close" @click='delImage(index)'></span>
                    </li>
                    <li class="publish-images-li-add">
                        <span class="icon" @click.stop="addPic"></span>
                    </li>
                </ul>
            </div>
            <div class="detail-btn">
                <div class="detail-btn-item" @click="publishCancel">取消</div>
                <div class="detail-btn-item love-btn" @click="publishForm">发布</div>
            </div>
        </div>
    </transition>
</template>

<script>
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import { Toast } from 'vant'
    import { Dialog } from 'vant'
    import { ImagePreview } from 'vant'

    export default {
        data () {
            return {
                title: "留言",
                artsPublishFlag: false,
                textareaVal: "",
                returnShow: true,
                imgUrls: [],
                urlArr: [],
                isPhoto: true,
                btnTitle: '',
                isModify: false,
                previewImg:'',
                isPreview: false
            }
        },
        methods: {
            show () {
                this.artsPublishFlag = true
            },
            hide () {
                this.artsPublishFlag = false
            },
            // 提交
            publishForm () {
                if (this.textareaVal === "") {
                    Toast('评论不能为空')
                    return
                }
                // 数据提交
                axios.post('/api/index.php?g=Api&m=Ucenter&a=addtliuyan', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    content: this.textareaVal,
                    teamid: this.$route.params.id,
                    pic: this.imgUrls
                }).then((res) => {
                    if (res.data.rescode=='0000') {
                        // 提交数据
                        Dialog.alert({
                            message: '提交成功，审核通过之后方可显示！'
                        }).then(() => {
                            // location.reload()
                            Dialog.close()
                            this.publishCancel()
                        });
                    }
                }).catch(function (error) {

                })
            },
            // 取消
            publishCancel () {
                this.artsPublishFlag = false
                this.textareaVal = ""
                this.imgUrls = []
            },
            addPic () {
                const event = new MouseEvent('click');
                this.$refs.inputFile.dispatchEvent(event)
            },
            onFileChange (e) {
                var files = e.target.files || e.dataTransfer.files
                if(!files.length) return
                this.createImage(files,e)
            },
            // 创建图片列表
            createImage (file, e) {
                let vm = this;
                // 一次上传多张
                for (var i=0;i<file.length;i++) {
                    lrz(file[i], { width: 480 }).then(function(rst) {
                        vm.imgUrls.push(rst.base64);
                        return rst;
                    }).always(function() {
                        // 清空文件上传控件的值
                        e.target.value = null;
                    })
                }
                // lrz(file[0], { width: 480 }).then(function(rst) {
                //     vm.imgUrls.push(rst.base64);
                //     return rst;
                // }).always(function() {
                //     // 清空文件上传控件的值
                //     e.target.value = null;
                // })
            },
            // 删除图片
            delImage (index) {
                let vm = this;
                Dialog.confirm({
                    message: "确定删除该图片"
                }).then(() => {
                    vm.imgUrls.splice(index, 1);
                }).catch(() => {
                    Dialog.close()
                })
            },
            // 预览图片
            showImagePreview (item) {
                // const instance = ImagePreview([
                //     item
                // ], typeof position === 'number' ? position : 0);
                const instance = ImagePreview(this.imgUrls, typeof position === 'number' ? position : 0);
            }
        },
        watch: {
            imgUrls () {
                if (this.imgUrls.length >= 1) {
                    this.isPhoto = false
                } else {
                    this.isPhoto = true
                }
            }
        },
        components: {mTitle}
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .artsPublish
        width: 100%
        height: 100%
        position: fixed
        top: 0
        left: 0
        z-index: 99
        bottom: 0
        overflow: hidden
        background: #fff
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        .detail-btn
            position: absolute
            bottom: 40px
            height: 40px
            font-size: 0
            width: 100%
            .detail-btn-item
                width: 40%
                background: #aaaaaa
                height: 38px
                display: inline-block
                font-size: 16px
                margin-left: 7%
                line-height: 38px
                text-align: center
                color: #fff
                border-radius: 20px
                &.love-btn
                    background:  #f8624a
        .arts-publish-container
            position: absolute
            width: 100%
            top: 44px
            bottom: 0
            .publish-text
                width: 100%
                padding: 0 15px
                box-sizing: border-box
                .pulbish-textarea
                    width: 100%
                    height: 140px
                    line-height: 150%
                    border: 1px solid #eee
                    border-radius: 6px
                    padding: 10px 6px
                    box-sizing: border-box
            .publish-images-list
                width: 100%
                padding: 0 15px
                box-sizing: border-box
                margin-top: 10px
                .icon
                    background: url('./icon1.png') no-repeat
                    width: 100px
                    height: 100px
                    background-size: 100% 100%
                    display: inline-block
            .publish-images-item
                width: 100%
                padding: 0 15px
                box-sizing: border-box
                margin-top: 10px
                font-size: 0
                .publish-images-li
                    display: inline-block
                    width: 100px
                    height: 100px
                    margin-right: 10px
                    margin-bottom: 10px
                    position: relative
                    .list-link
                        width: 100%
                        height: 100px
                        .list-link-img
                            width: 100%
                            height: 100%
                    .list-img-close
                        background: url('./icon2.png') no-repeat
                        width: 16px
                        height: 16px
                        position: absolute
                        top: 6px
                        right: 6px
                        background-size: 100% 100%
                .publish-images-li-add
                    display: inline-block
                    width: 100px
                    height: 100px
                    .icon
                        background: url('./icon1.png') no-repeat
                        width: 100px
                        height: 100px
                        background-size: 100% 100%
                        display: inline-block
</style>